<template>
  <div style="padding-bottom: 20px">
    <el-container>
      <el-head>
        <el-button type="primary" icon="el-icon-check" size="mini" @click="confirmData(1)" v-loading.fullscreen.lock="fullscreenLoading"
          >同意</el-button
        >
        <el-dropdown
          placement="bottom"
          trigger="click"
          @command="batchOperate"
        >
          <el-button type="primary" size="mini">
            其他操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-back" command="3" v-loading.fullscreen.lock="fullscreenLoading"
              >退回上一步</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-refresh" command="5"
              >转签</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-arrow-left" command="7"
              >退回指定环节</el-dropdown-item
            >
            <el-dropdown-item icon="el-icon-refresh-right" command="4"
              >退回发起人</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        
        <!-- <el-button type="primary" @click="confirmData(3)" size="mini"
          >退回上一步</el-button
        >
        <el-button type="primary" size="mini" @click="openTurn">转签</el-button>
        <el-button type="primary" size="mini" @click="openStep"
          >退回指定环节</el-button
        >
        <el-button type="primary" @click="openFirstStep" size="mini"
          >退回发起人</el-button
        > -->
      </el-head>

      <el-dialog
        :visible.sync="dialogTurnshow"
        :append-to-body="true"
        width="500px"
        center
      >
        <el-tabs type="border-card">
          <el-tab-pane label="转签">
            <el-form :inline="true" label-position="left">
              <el-form-item label="工号：">
                <el-select
                  v-model="TurnAccount"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入工号"
                  :remote-method="remoteMethod"
                  :loading="loading"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.Account"
                    :label="item.Account + '' + item.Name"
                    :value="item.Account"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="意见：">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  placeholder="意见"
                  v-model="AduitComment"
                  style="width: 350px"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="text-align: right">
          <el-button type="danger" @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="confirmData(5)" v-loading.fullscreen.lock="fullscreenLoading">转签</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :visible.sync="dialogStepshow"
        :append-to-body="true"
        width="500px"
        center
      >
        <el-tabs type="border-card">
          <el-tab-pane label="退回指定环节">
            <el-form :inline="true" label-position="left">
              <el-form-item label="环节：">
                <el-select
                  v-model="StepInstanceID"
                  placeholder="请选择指定环节"
                >
                  <el-option
                    v-for="item in ListLog"
                    :key="item.StepInstanceID"
                    :label="item.UserName+' '+item.StepName"
                    :value="item.StepInstanceID"
                    style="width: 350px"
                    
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="意见：">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  placeholder="意见"
                  v-model="AduitComment"
                  style="width: 350px"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="text-align: right">
          <el-button type="danger" @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="confirmData(7)" v-loading.fullscreen.lock="fullscreenLoading">退回</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :visible.sync="dialogFirstStepshow"
        :append-to-body="true"
        width="500px"
        center
      >
        <el-tabs type="border-card">
          <el-tab-pane label="退回发起人">
            <el-form :inline="true" label-position="left">
              <el-form-item label="意见：">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  placeholder="意见"
                  v-model="AduitComment"
                  style="width: 350px"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="text-align: right">
          <el-button type="danger" @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="confirmData(4)" v-loading.fullscreen.lock="fullscreenLoading">退回</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import path from "path";
import { deepClone } from "@/utils";
import { getDataList } from "@/api/datalist";
import { GetAllAccountData } from "@/api/Common";

export default {
  props: {
    ListLog:[],
    fullscreenLoading:''
  },
  data() {
    return {
      ProjectForm: "",
      submitData: {},
      routes: [],
      TurnAccount: "",
      StepInstanceID: "",
      AduitComment: "",
      dialogTurnshow: false,
      dialogStepshow: false,
      dialogFirstStepshow: false,
      userlist: [],
      options: [],
      Datelist: [],
      Search: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 10, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "005", // 表编号
        jsWhere: " and IsCalculation=1", // 自定义条件
      },

      screenWidth: document.body.clientWidth,
    };
  },
  computed: {
    routesData() {
      return this.routes;
    },
  },
  created() {
    this.getDataList();
  },

  methods: {
    pageChange(page) {
      // 翻页
      this.Search.page = page;

      this.getDataList();
    },
    async getDataList() {
      // 获取列表数据，通用
      const res = await getDataList({ data: JSON.stringify(this.Search) });

      this.Datelist = res.data.Table;
      this.Search.total = res.data.Table1[0].RecordCount;
    },
    sortChange: function (column) {
      this.Search.sort = column.prop + " " + column.order;

      this.getDataList();
    },
    openTurn() {
      this.dialogTurnshow = true;
    },
    openStep() {
      this.dialogStepshow = true;
    },
    openFirstStep() {
      this.dialogFirstStepshow = true;
    },
    canceldelete() {
      this.dialogStepshow = false;
      this.dialogTurnshow = false;
      this.dialogFirstStepshow = false;
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(async () => {
          const result = await GetAllAccountData({
            Account: query,
          });
          this.userlist = result.data.Table;
          this.loading = false;
          this.options = this.userlist.filter((item) => {
            return item.Account.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //下拉按钮
    batchOperate(command) {
      switch (command) {
        case "3":
          this.confirmData(3);
          break;
        case "5":
          this.openTurn();
          break;
        case "7":
          this.openStep();
          break;
        case "4":
          this.openFirstStep();
          break;
      }
    },

    confirmData(submit) {
      this.submitData = {};
      this.submitData.submit = submit;
      this.submitData.TurnAccount = this.TurnAccount;
      this.submitData.StepInstanceID = this.StepInstanceID;
      this.submitData.AduitComment = this.AduitComment;
      this.$emit("confirmData", this.submitData);
      this.dialogTurnshow=false
      this.dialogStepshow=false
      this.dialogFirstStepshow=false
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .EditObjs-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }
}

.el-dropdown {
  vertical-align: top;
  margin-left: 10px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
